【前言】
本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。
本系列標題一律以【】標示該篇文章主要涉及的內容，例如【JavaScript】、【Vue】等等。
若內容有誤，還麻煩各路大神不吝於點出問題，感激不敬。

Bootstrap是使用率非常高的前端框架，裡面有很多設計好的components可以直接拿來使用
其中Navbar便是一個
官網連結：Bootstrap官方網站的Navbar

而本文正是因為近期在做專案的時候，在使用Bootstrap的Navbar上發現了一些心得
因此才會撰寫此文

Bootstrap的Navbar不會自己收起來？

在最標準的Bootstrap Navbar中，在lg以下就會變成俗稱的漢堡選單（如下圖）

當我們點擊右方的按鈕時，選單就會展開（如下圖）

然而，由於我的專案使用了Vue CLI + Vue Router
同時我將Navbar獨立成一個元件，因此當我們點選了選單內的連結，跳轉到其他頁面的時候
Vue並不會重新渲染Navbar元件，因此選單卻不會自己收起來，它會跟卡比獸一樣卡著

因此，在這個專案中，我就必須想辦法讓它在跳頁的時候自己收闔起來

個人解法

由於這是最近在做專案的時候遇到的問題，因此就單純分享我的解法
畢竟根據專案情況的不同，有很多種寫法都可以做到一樣的事情

我的專案是使用Vue CLI + Vue Router
因此是Navbar裡面主要就是<router-link>，對應Vue Router的路由表

個人解法：

watch: {
    $route(){
          if(document.body.offsetWidth < 992){
              this.$refs.navbarBtn.click();
          }
    }
}

使用watch來直接watch $route，當$route發生改變時，便會執行{ }中的程式碼
這裡用document.body.offsetWidth來得到螢幕寬度，而992正是Bootstrap的lg
因此if(document.body.offsetWidth < 992){...}這段的意思就是，當Bootstrap Navbar變成漢堡選單時，執行{ }內的程式碼
而我做的事情也非常簡單，就是再按一次按鈕
前面有提到使用者再點一次漢堡選單的按鈕會收起來
因此，我就透過執行click()事件來達到再點一次按鈕的行為，這樣跳頁之後選單就自動收起來了

以上就是今天的一點小心得分享，謝謝大家